import React from "react";
import { Spin } from "antd";
import { toJS } from "mobx";
import { WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import ChartPanel from "../../../public/chartpanel/ChartPanel";
import { i18n } from "../../../public/i18n";
import * as Util from "../../../util/Util";

/**
 * 个人执行力评测
 */
@inject("individualMainStore")
@observer
export default class IndividualExecAssessIndex extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.individualMainStore;
  }

  componentWillMount() {
    this.getData();
  }

  getData() {
    const { loadTabData } = this.store;
    loadTabData();
  }

  render() {
    const {
      execAssessConst, //获取该页面一些常量数据配置
      onGoalSelectedOptionChange,
      hasRight,
      execAssesData: {
        goalSelectedOption,
        goalDatas,
        taskDatas,
        performanceDatas,
        goalLoading,
        taskLoading,
        performanceLoading,
      }, //动态数据
    } = this.store;
    if (!hasRight) {
      return Util.renderAlertPage(
        "<span style='color:red'>" + i18n.message.authFailed() + "</span>",
        "",
        "30%",
        Util.getCurrentHeight()-151,
        this.props.ecId || ''
      );
    }
    const { goalOptions } = execAssessConst();
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@dim6v4`} spinning={false}>
        <div className="wea-workrelate-team-portrait-exec-assess">
          <div className="task-goal-wrapper">
            <div className="goal-wrapper">
              <ChartPanel ecId={`${this && this.props && this.props.ecId || ''}_ChartPanel@kdxfg3`}
                charts={[
                  {
                    type: "pie",
                    width: "100%",
                    height: 400,
                    title: i18n.label.goalCompletionRate(),
                    data: toJS(goalDatas.data),
                    slogan: [
                      `${i18n.label.goalCompletionRate()}\${completerate}&nbsp;&nbsp;&nbsp;&nbsp;${i18n.module.overInPost()}`,
                      {
                        completerate: {
                          label: `${goalDatas.finishrate}%`,
                          color: "#1589DD",
                        },
                        passrat: {
                          label: `${goalDatas.passrate}%`,
                          color: "#DB8A2B",
                        },
                      },
                    ],
                    rightLegend: {
                      // 只有当chart.slogan不为空时才设置该属性，用于设置legend的宽高
                      width: "40%",
                      itemWidth: "60%", // itemWidth是相对于width而言
                      itemHeight: 50,
                    },
                    noborder: true,
                    loading: goalLoading,
                    extraCom: (
                      <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@hz81s1@goalprior`}
                        style={{ width: 80 }}
                        options={goalOptions}
                        value={goalSelectedOption}
                        onChange={onGoalSelectedOptionChange}
                      />
                    ),
                  },
                ]}
              />
            </div>
            <div className="task-wrapper">
              <ChartPanel ecId={`${this && this.props && this.props.ecId || ''}_ChartPanel@sz78p3`}
                charts={[
                  {
                    type: "pie",
                    width: "100%",
                    height: 400,
                    title: i18n.label.taskCompletionRate(),
                    data: toJS(taskDatas.data),
                    slogan: [
                      `${i18n.label.taskCompletionRate()}\${completerate}&nbsp;&nbsp;&nbsp;&nbsp;${i18n.module.overInPost()}`,
                      {
                        completerate: {
                          label: `${taskDatas.finishrate}%`,
                          color: "#1589DD",
                        },
                        passrat: {
                          label: `${taskDatas.passrate}%`,
                          color: "#DB8A2B",
                        },
                      },
                    ],
                    rightLegend: {
                      width: "40%",
                      maxWidth: 150,
                      itemWidth: 70,
                      itemHeight: 50,
                    },
                    noborder: true,
                    loading: taskLoading,
                  },
                ]}
              />
            </div>
          </div>

          <ChartPanel ecId={`${this && this.props && this.props.ecId || ''}_ChartPanel@gnurv4`}
            charts={[
              {
                type: "line",
                width: "100%",
                height: 400,
                title: i18n.label.averagePerformanceScoreInYear(),
                slogan: [
                  i18n.module.overPerformanceInPost(),
                  {
                    passrat: {
                      label: `${performanceDatas.passrate}%`,
                      color: "#DB8A2B",
                    },
                  },
                ],
                data: toJS(performanceDatas.data),
                noborder: true,
                loading: performanceLoading,
              },
            ]}
          />
        </div>
      </Spin>
    );
  }
}
